<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>排序</title>
		<!-- <link rel="stylesheet" href="test.css"> -->
		<style type="text/css">
			*{padding:0;margin:0;font-size: 14px;}
			.big-box{padding-top:10px;padding-left:10px;}
			.box {display: flex;margin-top: 20px;}
			.box .item .bar-box{height: 100px;width: 15px;margin-left:auto;margin-right:auto;position:relative ;}
			.box .item {margin-right: 2px;width: 20px;text-align: center;}
			.box .item .bar{position: absolute;bottom: 0;left:0;width: 15px;background: #cdcdcd;height: 20px;}
			.box .item.active .bar{background-color: #E4393C;}
		</style>
	</head>
	<body>
		<div class="big-box">
			<div class="tool">
				<button id="btn1">效果</button>
				<button id="btn2">慢动作</button>
				<span>完成</span>
			</div>
			<div id="box" class="box">
				<!-- <div class="item">
					<div class="bar-box">
						<div class="bar"></div>
					</div>
					<div class="number">
						10
					</div>
				</div> -->
			</div>
		</div>
		<script type="text/javascript">
			var getElem = function(seletor){
				return document.getElementById(seletor);
			}
			function initNumber(){
				let arr = [];
				for(let i=0;i<50;i++){
					arr.push(Math.floor(Math.random()*100 +1))
				}
				return arr;
			}
			var arrIndex =0,move = 0,barArr = initNumber();
			function render(barArr,curr){
				var html = '',box = getElem('box');
				barArr.map((it,index)=>{
					html += `<div class="item ${curr===index?'active':''}">
					<div class="bar-box">
						<div class="bar" style="height:${it}px"></div>
					</div>
					<div class="number">
						${it}
					</div>
				</div>`
				})
				box.innerHTML=html;
			}
			render(barArr);
			function compare(){
				let prev = barArr[arrIndex] ,
					curr = barArr[arrIndex + 1];
					// debugger;
				if(arrIndex === move){
					if(prev>curr){
						barArr[arrIndex] = curr;
						barArr[arrIndex + 1] = prev;
						move = move - 1;
						// console.log('arrIndex===move move',move)
						render(barArr,arrIndex);
					}else{
						console.log('arrIndex===move arrIndex',move)
						move = arrIndex-1;
						barArr[arrIndex-1] = prev;
						barArr[arrIndex] = curr;
						arrIndex = arrIndex + 1;
						render(barArr,arrIndex);
						if(barArr[move-1]&&barArr[move]>barArr[move-1]){
							 move = arrIndex;
						}
					}
				}else{
					curr = barArr[move],prev = barArr[move -1];
					if( prev > curr){
						var temp = barArr[move];
						barArr[move] = barArr[move - 1];
						barArr[move - 1] = temp;
						move = move -1;
						if(move < 0 ){
							arrIndex = arrIndex + 1;
						}
						// console.warn('arrIndex!= move move '+move)
						render(barArr,move);
					}else{
						move = arrIndex = arrIndex + 1;
						// console.warn("arrIndex!= move arrIndex " +arrIndex);
						render(barArr,arrIndex);
					}
				}
				if(arrIndex >= barArr.length -1){
					clearInterval(timer);
				}
			}
			var timer = setInterval(compare,100);
			// var timer = setTimeout(compare,1000)
		</script>
			
	</body>
</html>